

/* 颜色 start */
/* 内置类型颜色 start */
@for $i from 1 to length($tn-type-names)+1 {
  $typeName: nth($tn-type-names, $i);
  .tn-type-#{$typeName} {
    background-color: map-get(map-get($tn-type-color-map, $typeName), "normal") !important;
    color: #FFFFFF !important;
    &.tn-border, &.tn-border-bold {
      color: map-get(map-get($tn-type-color-map, $typeName), "normal") !important;
      border-color: map-get(map-get($tn-type-color-map, $typeName), "light") !important;
    }
    &--light {
      background-color: map-get(map-get($tn-type-color-map, $typeName), "light") !important;
      color: map-get(map-get($tn-type-color-map, $typeName), "normal") !important;
      &[class*="tn-shadow"]{
        box-shadow: $tn-box-shadow-attr map-get(map-get($tn-type-color-map, $typeName), "normal") !important;
      }
    }
    &--font {
      color: map-get(map-get($tn-type-color-map, $typeName), "normal") !important;
    }
    &[class*="tn-shadow"]{
      box-shadow: $tn-box-shadow-attr map-get(map-get($tn-type-color-map, $typeName), "light") !important;
    }
  }
}
/* 内置类型颜色 end */
/* 背景颜色 start */
@for $i from 1 to length($tn-color-names)+1 {
  $colorName: nth($tn-color-names, $i);
  $nextColorName: '';
  @if ($i < length($tn-color-names)) {
    $nextColorName: nth($tn-color-names, $i+1);
  } @else {
    $nextColorName: nth($tn-color-names, 1);
  }
  .tn-bg-#{$colorName} {
    @include getBgColor($colorName);

    &--gradient {
      @include getGradientColor(
        map-get(map-get($tn-color-map, $colorName), 'normal'),
        map-get(map-get($tn-color-map, $nextColorName), 'normal')
      );

      &--light {
        @include getGradientColor(
          map-get(map-get($tn-color-map, $colorName), 'light'),
          map-get(map-get($tn-color-map, $nextColorName), 'light'),
          map-get(map-get($tn-color-map, $colorName), 'normal')
        );
      }
      &--single {
        @include getGradientColor(
          map-get(map-get($tn-color-map, $colorName), 'normal'),
          map-get(map-get($tn-color-map, $colorName), 'disabled')
        );
      }
    }
  }
}
.tn-bg-white {
  @include getBgColor('white');
}
.tn-bg-black {
  @include getBgColor('black');
}
/* 背景颜色 end */
/* 边框颜色 start */
@for $i from 1 to length($tn-color-names)+1 {
  $colorName: nth($tn-color-names, $i);

  .tn-border-#{$colorName} {
    @include getColor('border-color', $colorName);
  }
}
.tn-border-white {
  @include getColor('border-color', 'white');
}
.tn-border-black {
  @include getColor('border-color', 'black');
}
/* 边框颜色 end */
/* 阴影颜色 start */
@for $i from 1 to length($tn-color-names)+1 {
  $colorName: nth($tn-color-names, $i);
  
  .tn-shadow-#{$colorName} {
    @include getColor('box-shadow', $colorName, $tn-box-shadow-attr);
  }
  .tn-text-shadow-#{$colorName} {
    @include getColor('text-shadow', $colorName, $tn-box-shadow-attr);
  }
}
/* 阴影颜色 end */
/* 字体颜色 start */
@for $i from 1 to length($tn-color-names)+1 {
  $colorName: nth($tn-color-names, $i);
  
  .tn-color-#{$colorName} {
    @include getColor('color', $colorName);
  }
}
.tn-color-white {
  @include getColor('color', 'white');
}
.tn-color-black {
  @include getColor('color', 'black');
}
/* 字体颜色 end */
/* 颜色 end */

/* 酷炫背景颜色图片 start */
@for $i from 1 to (16+1) {
  .tn-cool-bg-#{$i} {
    @include getGradientColor(
      map-get(nth($tn-cool-bg-list, $i), "start"),
      map-get(nth($tn-cool-bg-list, $i), "end"),
    )
  }
}
.tn-cool-bg-image {
  position: relative;
}
.tn-cool-bg-image::after {
  content: " ";
  position: absolute;
  z-index: inherit;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  border-radius: 10rpx;
  opacity: 1;
  transform: scale(1, 1);
  background-size: 100% 100%;
  background-image: inherit;
}
.tn-cool-bg-image:nth-of-type(1n)::after {
  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/1.png);
}
.tn-cool-bg-image:nth-of-type(2n)::after {
  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/2.png);
}
.tn-cool-bg-image:nth-of-type(3n)::after {
  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
}
.tn-cool-bg-image:nth-of-type(4n)::after {
  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/4.png);
}
.tn-cool-bg-image:nth-of-type(5n)::after {
  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/5.png);
}
.tn-cool-bg-image:nth-of-type(6n)::after {
  background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/6.png);
}
/* 酷炫背景颜色图片 end */

/* 动态背景颜色 start */
.tn-dynamic-bg-1 {
  color: #fff;
  background: linear-gradient(45deg, #F15BB5, #9A5CE5, #01BEFF, #00F5D4);
  background-size: 500% 500%;
  animation: dynamicBg 15s ease infinite;
}
@keyframes dynamicBg {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}
/* 动态背景颜色 end */